<template>
  <n-card class="mt-70px mx-auto pl-20px pr-20px">
    <n-tabs type="segment" animated>
      <n-tab-pane name="chap1" tab="网站分类">
        <n-data-table
          :columns="columns"
          :data="data"
          :pagination="pagination"
          :bordered="false"
          titleAlign="center"
        />
      </n-tab-pane>
      <n-tab-pane name="chap2" tab="分类">
        “威尔！着火了！快来帮忙！”我听到女朋友大喊。现在一个难题在我面前——是恢复一个重要的
        Amazon 服务，还是救公寓的火。<br /><br />
        我的脑海中忽然出现了 Amazon
        著名的领导力准则”客户至上“，有很多的客户还依赖我们的服务，我不能让他们失望！所以着火也不管了，女朋友喊我也无所谓，我开始
        debug 这个线上问题。
      </n-tab-pane>
    </n-tabs>
  </n-card>
</template>

<script setup>
import { NButton, useMessage } from "naive-ui";
const data = reactive([
  {
    name: "分类名称",
    desc: "个人自用站点",
    icon: "xxx",
    sort: "排序",
    createTime: "创建时间",
    action: "删除",
  },
  {
    name: "谢谢谢谢",
    desc: "个人自用站点",
    icon: "xxx",
    sort: "排序",
    createTime: "创建时间",
    action: "删除",
  },
  {
    name: "谢谢谢谢",
    desc: "xxxx",
    icon: "xxx",
    sort: "排序",
    createTime: "创建时间",
    action: "删除",
  },
]);

const columns = reactive([
  {
    title: "分类名称",
    key: "name",
    render(row) {
      return h(
        NButton,
        {
          type: "primary",
          strong: true,
          tertiary: true,
          size: "small",
        },
        {
          default: () => row.name,
        }
      );
    },
  },
  {
    title: "分类描述",
    key: "desc",
  },
  {
    title: "分类图标",
    key: "icon",
    render(row) {
      return h("Icon", {
        name: "material-symbols:id-card-outline",
      });
    },
  },
  {
    title: "排序",
    key: "sort",
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    key: "action",
    render(row) {
      return [
        h(
          NButton,
          {
            type: "primary",
            strong: true,
            tertiary: true,
            size: "small",
            style: {
              marginRight: "6px",
            },
          },
          {
            default: () => "删除",
          }
        ),
        h(
          NButton,
          {
            type: "primary",
            strong: true,
            tertiary: true,
            size: "small",
          },
          {
            default: () => "编辑",
          }
        ),
      ];
    },
  },
]);
</script>

<style>
</style>